<template>
	<v-dialog v-model="visible" width="800px">
		<v-card>
			<v-card-text>
				<div class="pt-5">{{ modText }}分类类型</div>
			</v-card-text>
			<v-card-text>
				<v-form @submit.prevent.stop="onSave" ref="form">
					<v-row>
						<v-col sm="6">
							<md-upload-image v-model="form.banner" label="横幅" :rules="rules.banner" height="100px" width="200px"/>
						</v-col>
						<v-col sm="6">
							<md-upload-image v-model="form.icon" label="ICON" :rules="rules.icon"/>
						</v-col>
						<v-col sm="6">
							<v-text-field v-model="form.name" label="类型名称" :rules="rules.name" counter="32"/>
						</v-col>
						<v-col sm="6">
							<v-text-field v-model.number="form.description" label="描述" :rules="rules.description"/>
						</v-col>
						<v-col sm="3">
							<v-switch v-model="form.isEnabled" label="是否启用"/>
						</v-col>
						<v-col sm="3">
							<v-switch v-model="form.isRoleAccess" label="是否权限控制"/>
						</v-col>
						<v-col sm="6">
							<md-role-selector v-model="form.roles" label="访问角色" :rules="rules.roles" multiple/>
						</v-col>
						<v-col sm="6">
							<v-text-field v-model.number="form.sortId" label="排序" :rules="rules.sortId" type="number"/>
						</v-col>
					</v-row>
				</v-form>
			</v-card-text>
			<v-card-actions class="justify-end">
				<v-btn @click="visible = false">取消</v-btn>
				<v-btn color="success" :loading="confirmLoading" @click="onSave">确认</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
	import MdDialogMixins from '@/common/mixins/MdDialogMixins';
	import CategoryApi from '@/common/api/CategoryApi';
	import MdUploadImage from '@/components/widget/MdUploadImage';
	import MdRoleSelector from '@/components/selector/MdRoleSelector';

	export default {
		name: 'CategoryClassDialog',
		components: {MdRoleSelector, MdUploadImage},
		mixins: [MdDialogMixins],
		data() {
			return {
				visible: false,
				rules: {
					name: this.$utils.formValidator(['required', 'max:255']),
					icon: this.$utils.formValidator(['required', 'max:255']),
					banner: this.$utils.formValidator(['required']),
					description: this.$utils.formValidator(['nullable', 'string']),
					isEnabled: this.$utils.formValidator(['nullable', 'boolean']),
					isRoleAccess: this.$utils.formValidator(['nullable', 'boolean']),
					sortId: this.$utils.formValidator(['nullable', 'integer']),
					roles: this.$utils.formValidator(['nullable', 'array'])
				}
			}
		},
		computed: {},
		methods: {
			onSave() {
				if (!this.$refs.form.validate()) {
					return;
				}
				this.confirmLoading = true;
				let api = this.form.id ? CategoryApi.classApi.update(this.form.id, this.form) : CategoryApi.classApi.create(this.form)
				api.then(res => {
					this.$utils.responseHandler(res, true, true).then(() => {
						this.visible = false;
						this.$emit('success')
					})
				}).finally(() => this.confirmLoading = false)
			},
			add() {
				this.action({}, 'add')
			},
			edit(data) {
				this.action(data, 'add')
				if (data.rolesIds) this.form.roles = data.rolesIds.split(',');
			},
			formData() {

			}
		}
	}
</script>

<style scoped lang="sass">
.in-input
	::v-deep
		.v-input__slot
			display: block
</style>